<template>
  <div class="Page Confirm">
    <div class="Title">
      <h1 class="fl f18">订单确认</h1>
      <img src="~/assets/img/cart_setp2.png" class="fr"/>
      <div class="clear"></div>
    </div>
    <form name="flowForm" id="flowForm" method="post" action="">
      <table class="GoodList">
        <tbody>
        <tr>
          <th class="name">商品</th>
          <th class="price">原价</th>
          <th class="priceNew">价格</th>
        </tr>
        </tbody>
        <tbody>
        <tr>
          <td colspan="3" class="teacher">讲师：{{ order.teacherName }}</td>
        </tr>
        <tr class="good">
          <td class="name First">
            <a
              target="_blank"
              :href="'https://43.143.114.14:3000/course/' + order.courseId"
            >
              <img :src="order.courseCover"
              /></a>
            <div class="goodInfo">
              <input type="hidden" class="ids ids_14502" value="14502"/>
              <a
                target="_blank"
                :href="'https://43.143.114.14:3000/course/' + order.courseId"
              >{{ order.courseTitle }}</a
              >
            </div>
          </td>
          <td class="price">
            <p>
              ￥<strong>{{ order.totalFee }}</strong>
            </p>
          </td>
          <td class="red priceNew Last">
            ￥<strong>{{ order.totalFee }}</strong>
          </td>
        </tr>
        <tr>
          <td class="Billing tr" colspan="3">
            <div class="tr">
              <p>
                共 <strong class="red">1</strong> 件商品，合计<span
                class="red f20"
              >￥<strong>{{ order.totalFee }}</strong></span
              >
              </p>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <div class="Finish">
        <div class="fr" id="AgreeDiv">
          <template>
            <el-radio-group v-model="payType">
              <el-radio :label="1">微信</el-radio>
              <el-radio :label="2">支付宝</el-radio>
            </el-radio-group>
          </template>
          <label><p class="on">
            <input type="checkbox" v-model="checked"/>我已阅读并同意<a
            href="https://pay.weixin.qq.com/static/protocol/protocol_normal_v4.shtml"
            target="_blank"
          >《在线教育平台购买协议》</a>
          </p></label>
        </div>
        <div class="clear"></div>
        <div class="Main fl">
          <div class="fl">
            <a :href="'/course/' + order.courseId">← 返回课程详情页</a>
          </div>
          <div class="fr">
            <p>
              共 <strong class="red">1</strong> 件商品，合计<span
              class="red f20"
            >￥<strong id="AllPrice">{{ order.totalFee }}</strong></span
            >
            </p>
          </div>
        </div>
        <input name="score" value="0" type="hidden" id="usedScore"/>
        <button class="fr redb" type="button" id="submitPay" @click="toPay()">
          去支付
        </button>
        <div class="clear"></div>
      </div>
    </form>
  </div>
</template>
<script>
import {getOrderInfoByNo} from '@/api/order'

export default {
  data() {
    return {
      order: {},
      orderNo: '',
      payType: 1,
      checked: true,
    }
  },
  created() {
    this.orderNo = this.$route.params.orderNo
    this.getOrderInfoByOrderNo()
  },
  methods: {
    getOrderInfoByOrderNo() {
      getOrderInfoByNo(this.orderNo).then(resp => {
        this.order = resp.data.data
      })
    },
    toPay() {
      if (!this.checked) {
        alert("请先阅读并同意《在线教育平台购买协议》")
        return
      }
      // 如果是微信支付
      if (this.payType === 1) {
        this.$router.push({
          path: '/pay/' + this.orderNo,
          query: {totalFee: this.order.totalFee, courseId: this.order.courseId}
        })
      } else {
        // 如果是支付宝支付
        window.open("http://43.143.114.14:8080/order/front_order/aliPay?orderNo=" + this.orderNo)
        this.$confirm('支付完毕后可点击右上角头像确认支付状态，当前要前往确认支付状态还是返回课程详情页面?', '提示', {
          confirmButtonText: '确认状态',
          cancelButtonText: '返回课程页面',
          type: 'info'
        }).then(() => {
          this.$router.push({
            path: '/ucenter',
          })
        }).catch(() => {
          this.$router.back()
        });
      }
    }
  },
}
</script>
